<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" name="" id="ipt" />
    <ul>
      <li>
        <span></span>
        <button>删除</button>
      </li>
    </ul>
  </body>
</html>
<script>
  let url = "http://localhost:3000/todos";
  function loadList() {
    let xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.send();
    xhr.onload = function () {
      if (xhr.status == 200) {
        let obj = JSON.parse(xhr.responseText);
        console.log(obj);
        document.querySelector("ul").innerHTML = obj
          .map(
            (v) => `<li>
                        <input type="checkbox" class="che" data-id="${v.id}">
                        <span>${v.title}</span>
                        <button class="del" data-id="${v.id}">删除</button>
                    </li>`
          )
          .reverse()
          .join("");
      }
    };
  }
  loadList();
  let ipt = document.querySelector("#ipt");
  ipt.onkeydown = function (e) {
    if (e.keyCode == 13) {
      let title = ipt.value;
      let completed = false;
      let bodyObj = { title, completed };
      let xhr = new XMLHttpRequest();
      xhr.open("POST", url);
      xhr.setRequestHeader("content-type", "application/json");
      xhr.send(JSON.stringify(bodyObj));
      xhr.onload = function () {
        if (xhr.status == 201) {
          let obj = JSON.parse(xhr.responseText);
          console.log(obj);
          loadList();
          ipt.value = "";
        }
      };
    }
  };
  let ul = document.querySelector("ul");
  ul.onclick = function (e) {
    console.log(e);
    if (e.target.className == "del") {
      console.log("删除按钮");
      console.log(e.target.dataset);
      console.log(e.target.dataset.id);
      let todoId = e.target.dataset.id;
      let delAPI = url + "/" + todoId;
      let xhr = new XMLHttpRequest();
      xhr.open("DELETE", delAPI);
      xhr.setRequestHeader("content-type", "application/json");
      xhr.send();
      xhr.onload = function () {
        if (xhr.status == 200) {
          let obj = JSON.parse(xhr.responseText);
          console.log(obj);
          loadList();
        }
      };
    }
    if (e.target.className == "che") {
      console.log(e.target.dataset);
      console.log(e.target.dataset.id);
      let todoId = e.target.dataset.id;
      let isChecked = e.target.checked; // 获取当前checkbox状态
      let updateAPI = url + "/" + todoId;
      // 准备要更新的数据（只更新completed字段）
      let updateData = {
        completed: isChecked,
      };
      let xhr = new XMLHttpRequest();
      xhr.open("PATCH", updateAPI); // 使用PATCH部分更新
      xhr.setRequestHeader("content-type", "application/json");
      xhr.send(JSON.stringify(updateData));
      xhr.onload = function () {
        if (xhr.status == 200) {
          let obj = JSON.parse(xhr.responseText);
          console.log(obj);
          // 更新成功后修改当前行样式
          e.target.parentElement.classList.toggle("completed", obj.completed);
        }
      };
    }
  };
</script>
